<template>
	<view class="wrapper">
		<u-navbar :title="$t('other.Download')" :autoBack="false" @leftClick="gotoBack" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
		</u-navbar>
		<view class="container">
			<image src="@/static/image/download/logo.png" class="logo-icon">
				<u-tabs :list="tabsList" @click="changeTabs" lineColor="#61BDB2" lineWidth="60rpx" lineHeight="8rpx"></u-tabs>
				<view class="QR-Code" v-if="currentTab == 'android'" @longpress.prevent="longTap" @touchend.prevent="touchEnd"
					@touchmove.prevent="touchMove" @touchstart.prevent>
					<tki-qrcode ref="qrcode" :val="appUrl" :size="349" :onval="true" :loadMake="true" @result="qrR"
						loadingText="" />
				</view>

				<view class="copy-link" @click="copyLink">
					{{$t('other.Copy-Link')}}
				</view>
		</view>
		<LongpressMenu :show.sync="LongpressMenuShow" @onQrDecoder="onQrDecoder"></LongpressMenu>
	</view>
</template>

<script>
	import {
		getAppUpdateUrl
	} from '@/services/system.js'

	// 引入生成二维码插件
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

	import LongpressMenu from '@/components/PreviewImage/components/LongpressMenu.vue'

	export default {
		components: {
			tkiQrcode,
			LongpressMenu
		},
		data() {
			return {
				tabsList: [{
						name: 'android',
					},
					// {
					// 	name: 'ios',
					// }
				],
				currentTab: 'android',
				appUrl: '',
				ifLongtap: true,
				LongpressMenuShow: false
			}
		},
		onLoad() {
			this._getAppUpdateUrl()
		},
		methods: {
			// 获取app下载地址
			async _getAppUpdateUrl() {
				uni.showLoading()
				const {
					success,
					result
				} = await getAppUpdateUrl()
				uni.hideLoading()
				if (success) {
					this.appUrl = result.data?.androidComplete
				}
				console.log(this.appUrl, '获取app下载地址');
			},
			// 返回上一页
			gotoBack() {
				if (getCurrentPages().length < 2) {
					uni.switchTab({
						url: `/`,
					});
				} else {
					uni.navigateBack()
				}
			},
			changeTabs(item) {
				this.currentTab = item.name
				// console.log('item', item);
			},
			copyLink() {
				uni.setClipboardData({
					data: this.appUrl,
					success: function() {
						console.log('fuzhichenggong');
					}
				});
			},
			// 二维码生成结果
			qrR(e) {
				console.log('二维码生成结果', e);
			},
			touchEnd() {
				this.ifLongtap = true;
			},
			touchMove() {
				this.ifLongtap = false;
			},
			longTap() {
				if (!this.ifLongtap) return
				this.LongpressMenuShow = true
			},
			onQrDecoder() {
				this.LongpressMenuShow = false
				if (this.isURL(this.appUrl)) {
					window.open(this.appUrl, '_blank');
				} else {
					uni.showModal({
						content: this.appUrl,
						cancelText: this.$t('index.Cancel'),
						confirmColor: "#61BDB2",
						confirmText: this.$t('chat.Copy'),
						success: function(res) {
							if (res.confirm) {
								uni.setClipboardData({
									data: this.appUrl,
									success: function() {
										console.log('fuzhichenggong');
									}
								});
							}
						}
					});
				}
			},
			isURL(str) {
				var pattern = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi); // fragment locator
				return pattern.test(str);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo-icon {
			margin-top: 80rpx;
			width: 400rpx;
			height: 400rpx;
		}

		.QR-Code {
			width: 400rpx;
			height: 400rpx;
			box-sizing: border-box;
			padding: 26rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 60rpx;
		}

		.copy-link {
			margin-top: 60rpx;
			padding: 0 102rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #61BDB2;
			border-radius: 96rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>